<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue-</title>

</head>
<body>
<div id="app">
    <span>{{ user.name }} {{ user.age }} {{user.hobby}}</span><br>
    <!--通过v-for遍历对象-->
    <span v-for="(value,key,index) in user">
            {{index}}&nbsp;&nbsp;&nbsp;{{key}}&nbsp;&nbsp;&nbsp;{{value}}------
        </span>
    <!--通过v-for遍历数组-->
    <ul>
        <li v-for="a,index in array">
            {{index}}&nbsp;&nbsp;&nbsp;{{a}}
        </li>
    </ul>
    <!--通过v-for遍历数组中的对象-->
    <ul>
        <li v-for="arr,index in arruser" v-key="arr.id">
            {{index}}&nbsp;&nbsp;&nbsp;{{arr.name}}&nbsp;&nbsp;&nbsp;{{arr.age}}&nbsp;&nbsp;&nbsp;{{arr.hobby}}
        </li>
    </ul>
</div>
<!--在head或body标签内部，可以通过script标签引入外部的JS文件,这里引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {name: "王昭君", age: 20, hobby: "冰冻"},
            array: ["庄周", "李白", "吕布", "上官婉儿", "伽罗"],
            arruser: [{id: 1, name: "王昭君", age: 20, hobby: "冰冻"},
                {id: 2, name: "李白", age: 22, hobby: "喝酒"},
                {id: 3, name: "周瑜", age: 18, hobby: "放火"}
            ]
        },
        methods: {}
    })
</script>
</body>
</html>